import React, { Component, useEffect, useState } from 'react'
import { Row, Col, Tooltip, Icon } from 'antd'
import moment from 'moment'
import { history } from 'umi'
import './index.less'
import { getArticleByTag } from '@/services/list'
import { serverBaseUrl, imageArr } from '@/assets/js/ConstVariable'

export default function Life() {
  const [articleList, setArticleList] = useState([])
  const [columnCount, setColumnCount] = useState(3)
  useEffect(async () => {
    const res = await getArticleByTag(0) //测试为0 默认为8
    if (res?.status === 200) {
      setArticleList(res?.data)
      console.log(res.data)
    }
    listenResize()
    console.log(window.innerWidth)
  }, [])
  // 监听屏幕大小发生改变
  function listenResize() {
    if (window.innerWidth <= 600) {
      setColumnCount(2)
    }
    window.addEventListener('resize', () => {
      setColumnCount(window.innerWidth <= 600 ? 2 : 3)
    })
  }
  return (
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={18} lg={16} xl={16}>
        <main className="waterfall" style={{ columnCount: columnCount }}>
          {articleList.map((item) => {
            return (
              <div className="item" key={item.id} onClick={() => history.push('/detail/' + item.id)}>
                <div className="item-content">
                  <img
                    src={item?.url?.length ? serverBaseUrl + item.url : imageArr[~~(Math.random() * 5)]?.href}
                    alt=""
                  />
                  <Tooltip title={item.title}>
                    <h3>{item.title}</h3>
                  </Tooltip>
                  <div className="icon-area">
                    <span>
                      <Icon type="calendar" /> {moment(Number(item.addTime * 1000)).format('MM-DD HH:mm')}
                    </span>
                    &emsp;
                    <span>
                      <Icon type="fire" theme="filled" /> {item.viewCount}
                    </span>
                  </div>
                  <article>
                    <Tooltip title={item.introduce}>{item.introduce}</Tooltip>
                  </article>
                </div>
              </div>
            )
          })}
        </main>
      </Col>
    </Row>
  )
}
